<template>
  <van-cell class="articles_item" @click="handleToArticle(articles)">
    <!-- 标题-->
    <div solt="title" class="titel van-multi-ellipsis--l3">
      {{ articles.title }}
    </div>
    <!-- 三张图片 -->
    <div v-if="articles.cover.type === 3" class="cover_wrap_images">
      <div
        v-for="(item, index) in articles.cover.images"
        :key="index"
        class="images_itemImages"
      >
        <van-image class="images" fit="cover" :src="item" />
      </div>
    </div>
    <!-- 内容区域 -->
    <div solt="label">
      <!-- 内容 -->
      <div class="label_info_wrap">
        <span class="info_name">作者 {{ articles.aut_name }} </span>
        <span class="info_count"> 评论 {{ articles.comm_count }} </span>
        <span class="info_pubdate">
          {{ articles.pubdate | relativeTime }}
        </span>
      </div>
    </div>
    <!-- 右侧图片 -->
    <div slot="extra" class="cover_right">
      <div v-if="articles.cover.type === 1">
        <van-image
          width="116"
          height="72"
          fit="cover"
          :src="articles.cover.images[0]"
        />
      </div>
    </div>
  </van-cell>
</template>

<script>
export default {
  name: "articlesItem",
  props: {
    articles: {
      type: Object,
      required: true,
      default: function() {
        return {};
      }
    }
  },
  methods: {
    handleToArticle({ art_id }) {
      this.$router.push("/article/" + art_id);
    }
  }
};
</script>

<style lang="less" scoped>
.articles_item {
  .title {
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 22px;
    font-size: 16px;
  }
  /deep/ .van-cell__value {
    margin-right: 12px;
  }
  .label_info_wrap {
    font-size: 12px;
    color: #bcbcbc;
    .info_pubdate {
      margin-left: 10px;
    }
  }
  .cover_wrap_images {
    display: flex;
    flex-wrap: nowrap;
    .images_itemImages {
      height: 73px;
      &:not(:last-child) {
        padding: 5px;
      }
      padding: 5px 5px;
      flex: 1;
      .images {
        width: 100%;
        height: 73px;
      }
    }
  }
}
</style>